

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="dayu">
  <meta name="keywords" content="">
  
    <meta name="description" content="html5有哪些新特性、移除了那些元素？ 新增特性  新增标签 article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、sum">
<meta property="og:type" content="article">
<meta property="og:title" content="前端知识点">
<meta property="og:url" content="http://example.com/2023/02/25/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9/index.html">
<meta property="og:site_name" content="Dayu">
<meta property="og:description" content="html5有哪些新特性、移除了那些元素？ 新增特性  新增标签 article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、sum">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-02-24T16:42:34.000Z">
<meta property="article:modified_time" content="2023-09-05T13:21:06.455Z">
<meta property="article:author" content="dayu">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary_large_image">
  
  
  
  <title>前端知识点 - Dayu</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.3","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>dayu</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="前端知识点"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-02-25 00:42" pubdate>
          2023年2月25日 凌晨
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          7.7k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          64 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">前端知识点</h1>
            
            
              <div class="markdown-body">
                
                <h3 id="html5有哪些新特性、移除了那些元素？"><a href="#html5有哪些新特性、移除了那些元素？" class="headerlink" title="html5有哪些新特性、移除了那些元素？"></a>html5有哪些新特性、移除了那些元素？</h3><ul>
<li><p>新增特性</p>
<ul>
<li><p>新增标签</p>
<p>article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video</p>
<p>其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section</p>
</li>
<li><p>新增localStorage、sessionStorage</p>
</li>
<li><p>新增contenteditable属性 （任何dom节点只要加上contenteditable=”true”就可以变得可编辑）</p>
</li>
<li><p>Geolocation 地理定位</p>
</li>
</ul>
</li>
<li><p>移除特性</p>
<basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体 <strike> 中横线，<tt> 文本等宽</tt></strike></big></u></center></font></li>
</ul>
<h3 id="常见的盒子垂直居中的方法有哪些"><a href="#常见的盒子垂直居中的方法有哪些" class="headerlink" title="常见的盒子垂直居中的方法有哪些"></a>常见的盒子垂直居中的方法有哪些</h3><ul>
<li>line-height和margin</li>
<li>利用display: table属性</li>
<li>绝对定位+移动的水平垂直居中</li>
<li>利用padding</li>
<li>利用display: flex</li>
</ul>
<h3 id="display-none和visibility-hidden的区别？"><a href="#display-none和visibility-hidden的区别？" class="headerlink" title="display:none和visibility:hidden的区别？"></a>display:none和visibility:hidden的区别？</h3><ul>
<li><p>作用不同:</p>
<ul>
<li>visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。</li>
<li>display:none将元素的显示设为无，即在网页中不占任何的位置。    </li>
</ul>
</li>
<li><p>使用后HTML元素有所不同:</p>
<ul>
<li>visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。</li>
<li>display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。</li>
</ul>
</li>
<li><p>定义不同:</p>
<ul>
<li>visibility属性指定一个元素是否是可见的。</li>
<li>display这个属性用于定义建立布局时元素生成的显示框类型。    </li>
</ul>
</li>
</ul>
<h3 id="CSS的优先级"><a href="#CSS的优先级" class="headerlink" title="CSS的优先级?"></a>CSS的优先级?</h3><p>!importent&gt;行内&gt; id&gt; 类，伪类，属性&gt;标签，伪元素选择器 &gt; 继承和通配符</p>
<h3 id="WEB标准以及W3C标准是什么"><a href="#WEB标准以及W3C标准是什么" class="headerlink" title="WEB标准以及W3C标准是什么?"></a>WEB标准以及W3C标准是什么?</h3><ul>
<li>标签闭合</li>
<li>标签小写</li>
<li>嵌套正确</li>
<li>外部链接css和js</li>
<li>提倡结构、表现和行为相分离（HTML结构、CSS表现、JavaScript行为）</li>
</ul>
<h3 id="Canvas和SVG有什么区别？"><a href="#Canvas和SVG有什么区别？" class="headerlink" title="Canvas和SVG有什么区别？"></a>Canvas和SVG有什么区别？</h3><ul>
<li><p>Canvas</p>
<ul>
<li>可伸缩矢量图形</li>
<li>放大缩小不会失真    </li>
</ul>
</li>
<li><p>SVG</p>
<ul>
<li>HTML5新加的元素</li>
<li>使用XML描述2D图形的语言    </li>
</ul>
</li>
</ul>
<h3 id="清除浮动的方法？"><a href="#清除浮动的方法？" class="headerlink" title="清除浮动的方法？"></a>清除浮动的方法？</h3><ul>
<li>父盒子设置高度</li>
<li>overflow：hidden</li>
<li>伪元素</li>
<li>双伪元素</li>
<li>在父盒子末尾添加一个空盒子，设置 clear:both</li>
</ul>
<h3 id="什么是防抖和节流，js-如何处理防抖和节流"><a href="#什么是防抖和节流，js-如何处理防抖和节流" class="headerlink" title="什么是防抖和节流，js 如何处理防抖和节流?"></a>什么是防抖和节流，js 如何处理防抖和节流?</h3><ul>
<li>防抖就是触发下一个事件时停止掉上一个事件</li>
<li>节流是触发当前事件需要在上一个事件结束以后,通过设置节流阀(定时器)</li>
</ul>
<h3 id="什么是重绘和回流"><a href="#什么是重绘和回流" class="headerlink" title="什么是重绘和回流?"></a>什么是重绘和回流?</h3><ul>
<li>重绘：当元素内容以及布局没有发生改变，只是元素外观发生改变（background-color）,就会重绘</li>
<li>当一部分内容或者布局发生了改变，重新构建页面就会产生回流</li>
<li>产生回流一定会造成重绘，但是重绘不一定造成回流</li>
</ul>
<h3 id="常用的块与行属性内标签有哪些？有什么特征？"><a href="#常用的块与行属性内标签有哪些？有什么特征？" class="headerlink" title="常用的块与行属性内标签有哪些？有什么特征？"></a>常用的块与行属性内标签有哪些？有什么特征？</h3><ul>
<li><p>块标签：div、h1~h6、ul、li、table、p、br、form。</p>
<ul>
<li>特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行</li>
</ul>
</li>
<li><p>行标签：span、a、img、textarea、select、option、input。</p>
<ul>
<li>特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）</li>
</ul>
</li>
</ul>
<h3 id="js数据类型有哪些，区别是什么？"><a href="#js数据类型有哪些，区别是什么？" class="headerlink" title="js数据类型有哪些，区别是什么？"></a>js数据类型有哪些，区别是什么？</h3><ul>
<li>基本类型：string，number，boolean，null，undefined，symbol，bigInt<ul>
<li>基本类型存储在栈中，空间小，操作频繁</li>
</ul>
</li>
<li>引用类型： object，array<ul>
<li>引用数据类型存放在堆中，它的地址在栈中，一般我们访问就是它的地址</li>
</ul>
</li>
</ul>
<h3 id="git的基础使用有哪些？"><a href="#git的基础使用有哪些？" class="headerlink" title="git的基础使用有哪些？"></a>git的基础使用有哪些？</h3><ul>
<li><p>git init 初始化仓库</p>
</li>
<li><p>git clone 克隆</p>
</li>
<li><p>git status 检查文件状态</p>
</li>
<li><p>git branch -a 查看所有分支</p>
</li>
<li><p>git checkout分支名称 切换分支</p>
</li>
<li><p>git checkout -b 分支名称 创建本地分支</p>
</li>
<li><p>git add. 将文件添加到暂存区</p>
</li>
<li><p>git commit -m 描述信息</p>
</li>
<li><p>git pull 拉取代码</p>
</li>
<li><p>git push origin *** 上传代码到指定分支</p>
</li>
</ul>
<h3 id="jq遍历节点的方法？"><a href="#jq遍历节点的方法？" class="headerlink" title="jq遍历节点的方法？"></a>jq遍历节点的方法？</h3><ul>
<li>children()：获取匹配元素的子元素</li>
<li>next():元素后面紧邻的同级元素</li>
<li>prev():元素前的同级元素</li>
<li>siblings():元素同辈元素</li>
</ul>
<h3 id="jquery有几种选择器？"><a href="#jquery有几种选择器？" class="headerlink" title="jquery有几种选择器？"></a>jquery有几种选择器？</h3><ul>
<li>基本选择器：#id,class,element,*</li>
<li>层次选择器：parent&gt;child,prev+next,prev-siblings</li>
<li>基本过滤器选择器：:first,:last,:not,:even,:odd,:eq,:gt,:lt</li>
<li>内容过滤器选择器：:contains,:empty,:has,:parent</li>
<li>可见性过滤器选择器：:hidden,:visible</li>
<li>属性过滤器选择器：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value]</li>
<li>子元素过滤器选择器：:nth-child,:first-child,:last-child,:only-child</li>
<li>表单选择器：:input,:text,:password,:radio,:checkbox,:submit等</li>
<li>表单过滤器选择器：:enabled,:disabled,:checked,:selected</li>
</ul>
<h3 id="document-ready-方法和window-onload有什么区别？"><a href="#document-ready-方法和window-onload有什么区别？" class="headerlink" title="$(document).ready()方法和window.onload有什么区别？"></a>$(document).ready()方法和window.onload有什么区别？</h3><p>$(document).ready()方法可以在dom载入就绪时就对其进行操纵，并调用执行绑定的函数。</p>
<h3 id="jQuery对象和Dom对象转换？"><a href="#jQuery对象和Dom对象转换？" class="headerlink" title="jQuery对象和Dom对象转换？"></a>jQuery对象和Dom对象转换？</h3><ul>
<li>jQuery对象转换成Dom对象，使用$()函数进行转化：$(DOM对象)</li>
<li>Dom对象转换成jQuery对象，jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象，通过get(index)方法得到相应的DOM对象。</li>
</ul>
<h3 id="jQuery操作样式的常用方法？"><a href="#jQuery操作样式的常用方法？" class="headerlink" title="jQuery操作样式的常用方法？"></a>jQuery操作样式的常用方法？</h3><ul>
<li>addClass() 添加样式</li>
<li>removeClass() 删除样式</li>
<li>toggle() 切换样式</li>
</ul>
<h3 id="jquery的优点？"><a href="#jquery的优点？" class="headerlink" title="jquery的优点？"></a>jquery的优点？</h3><ul>
<li>jQuery 是轻量级的框架，大小不到 30kb</li>
<li>它有强大的选择器，出色的 DOM 操作的封装，有可靠的事件处理机制</li>
<li>完善的 ajax，出色的浏览器的兼容性</li>
<li>而且支持链式操作，隐式迭代</li>
<li>行为层和结构层的分离，还支持丰富的插件，jquery 的文档也非常的丰富</li>
</ul>
<h3 id="jQuery的ajax响应状态对应的含义"><a href="#jQuery的ajax响应状态对应的含义" class="headerlink" title="jQuery的ajax响应状态对应的含义"></a>jQuery的ajax响应状态对应的含义</h3><ul>
<li>200   OK/success   服务器成功返回了页面 （tomcat9.0返回success）</li>
<li>400    Bad Request      语法错误导致服务器不识别</li>
<li>401  Unauthorized   请求需要用户认证</li>
<li>404    Not found 指定的URL     在服务器上找不到</li>
<li>500  Internal Server Error  服务器遇到意外错误，无法完成请求</li>
<li>503  ServiceUnavailable 由于服务器过载或维护导致无法完成请求</li>
</ul>
<h3 id="（this）和this关键字在jquery中有何不同？"><a href="#（this）和this关键字在jquery中有何不同？" class="headerlink" title="$（this）和this关键字在jquery中有何不同？"></a>$（this）和this关键字在jquery中有何不同？</h3><ul>
<li>$(this)返一个jQuery对象，可以对他调用多个jQuery方法，比如用text（）获取文本，用val（）获取值等等</li>
<li>this代表当前元素，他是js关键词中的一个，表示上下文中的当前dom元素。不能对他调用jQuery方法，直到他被$ （）函数包裹，例如$(this)</li>
</ul>
<h3 id="mvvm和mvc模式理解及区别？"><a href="#mvvm和mvc模式理解及区别？" class="headerlink" title="mvvm和mvc模式理解及区别？"></a>mvvm和mvc模式理解及区别？</h3><ul>
<li>MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状态Model 将新的数据发送到 View，用户得到反馈。</li>
<li>MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。其中ViewModel层，就是View和Model层的粘合剂，他是一个放置用户输入验证逻辑，视图显示逻辑，发起网络请求和其他各种各样的代码的极好的地方。说白了，就是把原来ViewController层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。</li>
<li>MVC和MVVM的区别其实并不大。都是一种设计思想。主要就是MVC中Controller演变成MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验。当和Model频繁发生变化，开发者需要主动更新到View。</li>
</ul>
<h3 id="vue双向数据绑定的原理？"><a href="#vue双向数据绑定的原理？" class="headerlink" title="vue双向数据绑定的原理？"></a>vue双向数据绑定的原理？</h3><ul>
<li>mvvm场景：数据操作比较多的场景，需要大量使用DOM元素时，采用mvvm的开发方式，会更加便捷，让开发者更多的经历放在数据的变化上，解放繁琐的DOM元素</li>
<li>MVVM 模型，M 数据 从后台获取的商品数据，V 视图 就是写好的页面，每一个div，每一个input 都是视图，VM 视图模型，数据发生变化，通过视图模型会改变视图的显示，视图上的改变，也会通过视图模型进而影响数据的变化</li>
<li>核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。</li>
</ul>
<h3 id="vue的生命周期有哪些？"><a href="#vue的生命周期有哪些？" class="headerlink" title="vue的生命周期有哪些？"></a>vue的生命周期有哪些？</h3><p>beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）</p>
<h3 id="v-if-和v-show有什么区别？"><a href="#v-if-和v-show有什么区别？" class="headerlink" title="v-if 和v-show有什么区别？"></a>v-if 和v-show有什么区别？</h3><ul>
<li>都可以控制dom元素的显示和隐藏。</li>
<li>v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面。</li>
<li>v-if直接将dom元素从页面删除，再次切换需要重新渲染页面。</li>
</ul>
<h3 id="如何使用三目运算符代替if？"><a href="#如何使用三目运算符代替if？" class="headerlink" title="如何使用三目运算符代替if？"></a>如何使用三目运算符代替if？</h3><p>语法：条件 ? 结果1 ：结果2</p>
<h3 id="如何中断forEach循环？"><a href="#如何中断forEach循环？" class="headerlink" title="如何中断forEach循环？"></a>如何中断forEach循环？</h3><p>使用try…catch来终止循环</p>
<h3 id="undefined-和-null-的区别？"><a href="#undefined-和-null-的区别？" class="headerlink" title="undefined 和 null 的区别？"></a>undefined 和 null 的区别？</h3><ul>
<li>都是原始类型的值，且保存在栈中</li>
<li>进行条件判断时，两者都是false</li>
<li>null是js的关键字，表示空值；undefined不是js的关键字，它是一个全局变量</li>
<li><strong>null是Object的一个特殊值</strong>，如果一个Object为null，表示这个对象不是有效对象，null是一个不存在的对象的占位符；<strong>undefined是Globel的一个属性</strong></li>
<li>类型不一样(Object,undefined)</li>
<li>在数字运算中被转换为 number 类型的值不同(0,NAN)</li>
</ul>
<h3 id="和-的区别？"><a href="#和-的区别？" class="headerlink" title="== 和 ===的区别？"></a>== 和 ===的区别？</h3><ul>
<li>==是非严格意义上的相等，值相等就相等</li>
<li>===是严格意义上的相等，会比较两边的数据类型和值大小，值和引用地址都相等才相等</li>
</ul>
<h3 id="params和query的区别？"><a href="#params和query的区别？" class="headerlink" title="params和query的区别？"></a>params和query的区别？</h3><ul>
<li>params只能用name引入路由，query可以用name和path引入路由</li>
<li>params传值不再url地址栏显示，query会显示。params相当与post,query相当于get,params会相对更安全一些</li>
<li>params传值后刷新值就没了，query传值后刷新值还存在</li>
<li>取值方法不同，this.$route.params 和 this.$route.query</li>
</ul>
<h3 id="vue组件传值的方式有哪些？"><a href="#vue组件传值的方式有哪些？" class="headerlink" title="vue组件传值的方式有哪些？"></a>vue组件传值的方式有哪些？</h3><ul>
<li>父传子：props</li>
<li>子传父：$emit</li>
</ul>
<h3 id="什么是虚拟dom-介绍虚拟dom？"><a href="#什么是虚拟dom-介绍虚拟dom？" class="headerlink" title="什么是虚拟dom,介绍虚拟dom？"></a>什么是虚拟dom,介绍虚拟dom？</h3><ul>
<li>让我们不用直接操作DOM元素，只操作数据便可以重新渲染页面</li>
<li>虚拟dom是为了解决浏览器性能问题而被设计出来的<ul>
<li>当操作数据时，将改变的dom元素缓存起来，等计算完后再通过比较映射到真实的dom树上</li>
</ul>
</li>
<li>diff算法比较新旧虚拟dom<ul>
<li>如果节点类型相同，则比较数据，修改数据</li>
<li>如果节点不同，直接干掉节点及所有子节点，插入新的节点</li>
<li>如果给每个节点都设置了唯一的key，就可以准确的找到需要改变的内容，否则就会出现修改一个地方导致其他地方都改变的情况</li>
</ul>
</li>
</ul>
<h3 id="路由模式：hash和history"><a href="#路由模式：hash和history" class="headerlink" title="路由模式：hash和history"></a>路由模式：hash和history</h3><ul>
<li>实现的功能：改变url且不让浏览器向服务器发请求，检测url的变化，截获url地址 并解析出需要的信息匹配路由规则。</li>
<li>hash基于<strong>url传参</strong> 会有<strong>体积限制</strong>,不会包括在http请求中对后端完全没有影响,改变hash<strong>不会重新加载页面</strong></li>
<li>history可以在url里放参数 还可以将数据存放在一个特定对象中</li>
<li>history模式浏览器白屏解决方法是在服务端加一个覆盖所有的情况候选资源,必须要服务端在服务器上有对应的模式才能使用,如果服务器没配置,可以先使用默认的hash</li>
</ul>
<h3 id="谈谈你对Webpack的理解？"><a href="#谈谈你对Webpack的理解？" class="headerlink" title="谈谈你对Webpack的理解？"></a>谈谈你对Webpack的理解？</h3><ul>
<li>webpack 是一个静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个 bundle</li>
<li>webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理</li>
<li>插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作</li>
</ul>
<h3 id="vuex的五个核心属性"><a href="#vuex的五个核心属性" class="headerlink" title="vuex的五个核心属性"></a>vuex的五个核心属性</h3><ul>
<li>state =&gt; 基本数据</li>
<li>getters =&gt; 从基本数据(state)派生的数据，相当于state的计算属性</li>
<li>mutations =&gt; 提交更改数据的方法，同步！</li>
<li>actions =&gt; 像一个装饰器，包裹mutations，使之可以异步</li>
<li>modules =&gt; 模块化Vuex</li>
</ul>
<h4 id="简述vuex数据传递过程"><a href="#简述vuex数据传递过程" class="headerlink" title="简述vuex数据传递过程"></a>简述vuex数据传递过程</h4><ul>
<li>页面通过<strong>mapAction</strong>异步提交事件到action</li>
<li>action通过<strong>commit</strong>把对应参数同步提交到mutation，mutation会修改state中对应的值</li>
<li>最后通过<strong>getter</strong>把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值    </li>
</ul>
<h3 id="axios的特性"><a href="#axios的特性" class="headerlink" title="axios的特性"></a>axios的特性</h3><ul>
<li>基于promise的异步ajax请求库</li>
<li>支持浏览器端和node端</li>
<li>支持请求拦截器和响应拦截器</li>
<li>支持取消请求</li>
<li>请求/响应数据有转换</li>
<li>能批量发送多个请求</li>
</ul>
<h3 id="谈谈对于Promise的理解"><a href="#谈谈对于Promise的理解" class="headerlink" title="谈谈对于Promise的理解"></a>谈谈对于Promise的理解</h3><ul>
<li><p>Promise是一种常用的异步解决方案，解决回调地狱的问题</p>
</li>
<li><p>Promise可以解决两个问题</p>
<ul>
<li>对象的状态不受外界影响</li>
<li>一旦状态改变，就不会再变，任何时候都可以得到这个结果</li>
</ul>
</li>
<li><p>Promise发送的请求会经历三个过程：padding（进行中）、fullfilled（成功）、rejected(失败)。当状态决定后就不会在改变,这个时候就会把状态改为resolved（已定型)</p>
</li>
</ul>
<h3 id="Var、let、const的区别及作用"><a href="#Var、let、const的区别及作用" class="headerlink" title="Var、let、const的区别及作用"></a>Var、let、const的区别及作用</h3><ul>
<li>var作用域为函数作用域，let为块级作用域</li>
<li>var有变量提升，let没有</li>
<li>const定义的是常量，不能修改，但是如果定义的是对象，可以修改对象内部的数据</li>
<li>let和const不可重复声明</li>
</ul>
<h3 id="什么是闭包？闭包有哪些优缺点？"><a href="#什么是闭包？闭包有哪些优缺点？" class="headerlink" title="什么是闭包？闭包有哪些优缺点？"></a>什么是闭包？闭包有哪些优缺点？</h3><ul>
<li>概念：函数嵌套函数、内部函数可以访问外部函数的参数和变量、私有变量和参数避免被回收。</li>
<li>解决的问题：保存变量</li>
<li>带来的问题：会造成内存泄漏问题</li>
<li>闭包的应用：防抖节流</li>
</ul>
<h3 id="es6有哪些新特性？"><a href="#es6有哪些新特性？" class="headerlink" title="es6有哪些新特性？"></a>es6有哪些新特性？</h3><ul>
<li>新增模板字符串</li>
<li>箭头函数</li>
<li>for-of（用来遍历数据—例如数组中的值）</li>
<li>ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象</li>
<li>增加了 let 和 const 命令，用来声明变量</li>
<li>对象、数组、函数参数解构</li>
<li>还有就是引入 module 模块的概念</li>
</ul>
<h3 id="三种存储的区别"><a href="#三种存储的区别" class="headerlink" title="三种存储的区别"></a>三种存储的区别</h3><ul>
<li><p>存储区别</p>
<ul>
<li>cookie 设置过期时间删除，即使窗口或浏览器关闭</li>
<li>localStorage 存储量大，存储持久数据，浏览器关闭后数据不会丢失除非手动删除</li>
<li>sessionStorage临时存储，关闭浏览器是存储内容自动清除</li>
</ul>
</li>
<li><p>存储大小</p>
<ul>
<li>cookie 数据大小不能超过4k</li>
<li>sessionStorage和localStorage虽然也有存储大小的限制，单笔cookie大得多，可达到5m或更大</li>
</ul>
</li>
</ul>
<h3 id="vue性能优化"><a href="#vue性能优化" class="headerlink" title="vue性能优化"></a>vue性能优化</h3><ul>
<li>函数式组件</li>
<li>路由懒加载</li>
<li>v-for要绑定key key是虚拟dom唯一标志,能帮vue高效的动态渲染页面,渲染页面时会使用diff算法,会比较新旧dom,在比较时只比较同一级,不进行跨级比较,key发生变化节点进行销毁,并且是子节点先销毁</li>
<li>computed缓存数据和watch keep-alive缓存组件</li>
<li>v-if和v-for不要同时使用,v-show是display,销毁是display-none.v-if为true创建.false销毁</li>
<li>设计vue响应式数据时不能设计太深.会做全量递归的计算</li>
<li>组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大</li>
<li>防抖节流</li>
<li>ui组件库按需引入</li>
</ul>
<h3 id="js判断数据类型的方法"><a href="#js判断数据类型的方法" class="headerlink" title="js判断数据类型的方法"></a>js判断数据类型的方法</h3><ul>
<li>利用typeof操作符，语法“typeof 变量”</li>
<li>利用instanceof运算符</li>
<li>利用constructor属性，语法“变量.constructor==数据类型”</li>
<li>利用toString()函数</li>
</ul>
<h3 id="操作数组常用的几种方法"><a href="#操作数组常用的几种方法" class="headerlink" title="操作数组常用的几种方法"></a>操作数组常用的几种方法</h3><ul>
<li><p>forEach——循环遍历</p>
</li>
<li><p>concat（）——拼接数组</p>
</li>
<li><p>filter（）——过滤数组</p>
</li>
<li><p>slice（）——截取元素</p>
</li>
<li><p>splice（）——删除数组中的属性</p>
</li>
<li><p>substring（） 和 substr（） —- 截取字符串</p>
</li>
<li><p>every（）——判断数组中是否有满足</p>
</li>
<li><p>some（）——只要有一个满足条件返回值就是true，没有满足条件的则为false</p>
</li>
<li><p>push（）——从数组末尾追加</p>
</li>
<li><p>unshift（）——从数组前面添加</p>
</li>
<li><p>pop（）——从数组末尾删除</p>
</li>
<li><p>reduce——数组求和</p>
</li>
<li><p>reverse（）——反转数组</p>
</li>
<li><p>sort（）——排序</p>
</li>
<li><p>indexOf（） 和 lastIndexOf （）——查找值</p>
</li>
<li><p>findIndex（）——查找数组中第一个满足条件的属性，并返回下标</p>
</li>
<li><p>join（）、toString（）、toLocaleString（） —- 数组转字符串</p>
</li>
</ul>
<h3 id="计算属性和监听属性的理解及区别"><a href="#计算属性和监听属性的理解及区别" class="headerlink" title="计算属性和监听属性的理解及区别"></a>计算属性和监听属性的理解及区别</h3><ul>
<li><p>计算属性</p>
<ul>
<li>变量不在daata中定义，而是在computed中定义。计算属性是一个函数，用return返回计算属性的结果</li>
<li>computed具有缓存功能，第一次计算的时候会把结果缓存起来，可以监听对象的某个具体属性</li>
<li>优先读取缓存数据，当无关数据改变时，不会重新计算而是直接使用缓存中的值，当数据发生改变时触发重新计算</li>
</ul>
</li>
<li><p>监听属性</p>
<ul>
<li>变量在data中定义，当该变量发生变化时，获取变化前后的值，会触发watch中的方法</li>
<li>当需要在数据变化时执行异步或开销较大的操作时，使用watch比较有用</li>
<li>可以进行深度监听，监听对象的变化</li>
<li>只能监听简单数据类型，如果监听复杂数据类型，如对象，无法监听对象具体某个属性</li>
</ul>
</li>
</ul>
<h3 id="什么原因会造成内存泄露？"><a href="#什么原因会造成内存泄露？" class="headerlink" title="什么原因会造成内存泄露？"></a>什么原因会造成内存泄露？</h3><ul>
<li>全局变量使用不当（没有声明的变量）</li>
<li>闭包使用不当</li>
<li>定时器/延时器没有清理</li>
<li>没有清理的DOM元素引用(dom清空或删除时，事件未清除)</li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E5%89%8D%E7%AB%AF/" class="category-chain-item">前端</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E5%89%8D%E7%AB%AF/">#前端</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>前端知识点</div>
      <div>http://example.com/2023/02/25/前端知识点/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>dayu</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年2月25日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/02/25/sql/" title="sql">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">sql</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/02/25/js%E6%B5%85%E6%8B%B7%E8%B4%9D%E4%B8%8E%E6%B7%B1%E6%8B%B7%E8%B4%9D/" title="js浅拷贝与深拷贝">
                        <span class="hidden-mobile">js浅拷贝与深拷贝</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
